<template>
  <el-form :model="uploadForm" ref="uploadForm" :rules="uploadRules">
    <div>
      <el-form-item  prop="file"><!-- prop="file" -->
        <el-upload
          ref="upload"
          action="/dev-api/product/add"
          accept="image/png, image/jpeg, image/png"
          list-type="picture-card"
          v-model="uploadForm.file"
          :limit="limit"
          :multiple="multiple"
          :http-request="uploadFile"
          :on-exceed="handleExceed"
          :on-change="handleChange"
          :on-preview="handlePictureCardPreview"
          :before-remove="beforeRemove"
          :on-remove="handleRemove"
          :before-upload="beforeImgUpload"
          :auto-upload="false">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

      <div style="margin-top: 15px">
        <!--<el-button  size="small" type="success" @click="submitUpload('uploadForm')">上传到服务器</el-button>-->
        <el-button size="small" type="primary" @click="resetForm()">重置</el-button>
      </div>

    </div>
  </el-form>
</template>

<script>
  export default {
    name: 'brandUpload',
    props: ['limit','multiple','formDataName'],
    data() {
      return {
        uploadForm: {
          file: ""
        },
        fileList:[],// 文件列表

        dialogImageUrl: '',
        dialogVisible: false,

        uploadRules: {
          file: [{ required: true, message: "请上传图片", trigger: "change" }]
        }
      };
    },
    methods: {
      validate(){
        let flag = true;
        this.$refs['uploadForm'].validate((valid) => {
          flag =  valid;
        });
        return flag;
      },

      //重置信息
      resetForm() {
        this.$refs['uploadForm'].resetFields();
        this.uploadForm.file = "";
        this.$refs.upload.clearFiles();
      },
      uploadFile(file){// 自定义上传
        console.log(file.file,file.file.name)
        this.$store.commit('brand/setBrandAllInfo',{key: this.formDataName, value: file.file})
      },
      submitUpload() {
        let flag = false;
        this.$refs['uploadForm'].validate((valid) => {
          if (valid) {
            this.$refs.upload.submit(); //执行此步骤 相当于执行 http-request 的自定义实现方法
            console.log("图片信息加入vuex成功");
            flag =  true
          }
        });
        return flag;
      },
      handleChange(file, fileList) {
        const typeList = ['image/png', 'image/jpeg', 'image/jpg']
        const isJPG = typeList.includes(file.raw.type);
        const isLt2M = file.size / 1024 / 1024 < 2;
        console.log(123)

        if (!isJPG) this.$message.error('上传头像图片只能是 JPG 格式!');
        if (!isLt2M) this.$message.error('上传头像图片大小不能超过 2MB!');
        if (!isJPG || !isLt2M){
          fileList.pop();
          return
        }

        this.uploadForm.file = fileList;
        console.log(this.uploadForm);
        this.$refs.uploadForm.clearValidate('file');
      },
      handleRemove(file, fileList) {
        if(fileList.length === 0){
          this.uploadRules.img = [{ required: true, message: '请上传微信二维码', trigger: 'change'}];
        }
        console.log(file, fileList);
      },
      handleExceed(files, fileList) {// 超出限制时的行为
        this.$message.warning(`当前限制选择 ${this.limit} 个文件`);
      },
      beforeRemove(file, fileList) {// 文件移除操作提示
        /*return this.$confirm(`确定移除 ${ file.name }？`);*/
      },
      beforeImgUpload(file) {// 限制用户上传的图片格式和大小
        const typeList = ['image/png', 'image/jpeg', 'image/jpg']
        const isJPG = typeList.includes(file.type);
        //const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handlePictureCardPreview(file) {// 点击文件列表中已上传的文件时的钩子
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },
    computed: {
    },
  }
</script>

<style scoped>

</style>
